import React, { Component } from 'react'
import { withRouter } from "react-router-dom";
import "./Roomname.scss"
import axios from '../../../../../api/Home'

class Roomname extends Component {
  state = {
    messages: []
  }

  constructor(props) {
    super(props);
    this.rentRef = React.createRef()
  }

  componentDidMount() {
    this.getProductList()
  }

  getProductList() {
    axios
      .get('app/home/mock', {
        params: {

        }
      })
      .then((res) => {
        // console.log(res);
        this.setState({
          messages: res.messages
        })
      })
  }

  itemPush = () => {
    this.props.history.push('/HouseInfo')
    // console.log(this.props.history)
  }

  render() {
    return (
      <div ref={this.rentRef} className="roomname">
        {
          this.state.messages.map((message, index) => {
            return <div onClick={this.itemPush} className="rent-list-item" key={message.id}>
              <div className="list-item-left">
                <img src={message.img} alt="" />
              </div>
              <div className="list-item-right">
                <div className="item-right-top">{message.name}</div>
                <div className="item-right-middle">
                  <span className="squaremeters">{message.squaremeters}</span>
                  <span className="price">{message.price + "元/月起"}</span>
                </div>
                <div className="item-right-middle2">{message.map}</div>
                <div className="item-right-bottom">{message.nature}</div>
              </div>
            </div>
          })
        }
      </div>
    )
  }
}

export default withRouter(Roomname)
